<template>
  <div>
    <el-table :data="notes" style="width: 100%">
      <el-table-column prop="id" label="笔记 ID" />
      <el-table-column prop="user.nickname" label="用户昵称" />
      <el-table-column prop="interact_info.liked_count" label="点赞数" />
      <el-table-column prop="interact_info.comment_count" label="评论数" />
      <el-table-column label="封面图">
        <template #default="scope">
          <el-image
            :src="scope.row.cover.url_default"
            :preview-src-list="[scope.row.cover.url_default]"
          />
        </template>
      </el-table-column>
      <el-table-column label="链接">
        <template #default="scope">
          <el-link :href="`https://www.xiaohongshu.com/explore/${scope.row.id}`" target="_blank">
            查看笔记
          </el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const notes = ref([]);

const fetchData = async () => {
  try {
    const response = await axios.post('http://127.0.0.1:8000/spider_some_search_note', {});
    const data = JSON.parse(response.data.body);
    if (data.success) {
      notes.value = data.notes;
    }
  } catch (error) {
    console.error('请求出错:', error);
  }
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
/* 可按需添加样式 */
</style>
